<script setup lang="ts">
import { getInformationEtc } from '@/api/realName'
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
import { useAppStore } from '@/store/modules/app'
//引入相关样式
import '@vue-office/docx/lib/index.css'
const appStore = useAppStore()
const { push, back } = useRouter()
const route = useRoute()
const isShow = ref(true)
if(route.query.type){
  isShow.value = false
}
const docInfo = ref()
const userInfo = appStore.getUserInfo
const queryDocument = async () => {
  const res = await getInformationEtc({
    username: userInfo.username,
    type: '0'
  })
  docInfo.value = res.data
}
queryDocument()

const onBack = () => {
  back()
}

const loading = ref(true)
const time = ref(10)
setInterval(async () => {
  time.value -= 1
  if (time.value === 0) {
    loading.value = false
    return
  }
}, 1000)

const gotoCard = () => {
  push({
    name: 'cardPage'
  })
}
</script>

<template>
  <van-nav-bar title="展业承诺书" fixed placeholder left-arrow @click-left="onBack"> </van-nav-bar>
  <div class="documentBox">
    <div class="documentWrapper" v-html="docInfo"></div>
    <div class="confirmBox" v-if="isShow">
      <van-button
        type="primary"
        size="large"
        @click="gotoCard"
        :loading="loading"
        :loading-text="time + 's'"
      >
        下一步
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.documentBox {
  width: 100vw;
  padding: 16px;
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: 110px;
  .confirmBox {
    position: fixed;
    padding: 16px;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #fff;
  }
}
.documentWrapper {
  width: 100%;
}
</style>
